{% extends 'base.html' %}
{% load static %}

{% block bodyline %}
<body class="hold-transition skin-blue sidebar-mini">
{% endblock %}

{% block bodycontent %}
    <div class="wrapper">
        <!-- Main Header -->
        <header class="main-header">
            <!-- Logo -->
            <a href="/" class="logo">
                <!-- mini logo for sidebar mini 50x50 pixels -->
                <span class="logo-mini"><b>O</b>PS</span>
                <!-- logo for regular state and mobile devices -->
                <span class="logo-lg"><b>MyOPS</b>Admin</span>
            </a>
            <!-- Header Navbar -->
            <nav class="navbar navbar-static-top" role="navigation">
                <!-- Sidebar toggle button-->
                <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                    <span class="sr-only">切换导航</span>
                </a>
                <!-- Navbar Right Menu -->
                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <!-- User Account Menu -->
                        <li class="dropdown user user-menu">
                            <!-- Menu Toggle Button -->
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <!-- The user image in the navbar-->
                                <img src="{% static 'adminLTE/dist/img/user3-128x128.jpg' %}" class="user-image" alt="User Image" />
                                <!-- hidden-xs hides the username on small devices so only the image appears. -->
                                <span class="hidden-xs">{{request.user.name}}</span>
                            </a>
                            <ul class="dropdown-menu">
                                <!-- The user image in the menu -->
                                <li class="user-header">
                                    <img src="{% static 'adminLTE/dist/img/user3-128x128.jpg' %}" class="img-circle" alt="User Image">
                                    <p>{{request.user.name}}<small>专业打杂</small></p>
                                </li>
                                <!-- Menu Footer-->
                                <li class="user-footer">
                                    <div class="pull-left">
                                        <div class="btn-group">
                                            <a href="#" class="btn btn-default btn-flat" data-toggle="tooltip" data-placement="top" title="" data-original-title="User Profile" data-addtab="UserProfile" data-target="#MasterTabs" data-title="个人资料" data-url="pages/examples/profile.html">个人资料</a>
                                            <a href="#" class="btn btn-default btn-flat" data-toggle="tooltip" data-placement="top" title="" data-original-title="Change User Photo" data-addtab="UserPhoto" data-target="#MasterTabs" data-title="修改头像" data-url="pages/User/ChangePhoto.html">
                                                <i class="fa fa-photo"></i>
                                            </a>
                                            <a href="#" class="btn btn-default btn-flat" data-toggle="tooltip" data-placement="top" title="" data-original-title="Change User Password">
                                                <i class="fa fa-key"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="pull-right">
                                        <a href="/logout/" class="btn btn-default btn-flat">注销</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>

        <!-- Left side column. contains the logo and sidebar -->
        <aside class="main-sidebar">
            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">
                <!-- Sidebar user panel (optional) -->
                <div class="user-panel">
                    <div class="pull-left image">
                        <img src="{% static 'adminLTE/dist/img/user3-128x128.jpg' %}" class="img-circle" alt="User Image" />
                    </div>
                    <div class="pull-left info">
                        <p>{{request.user.name}}</p>
                        <!-- Status -->
                        {% if request.user.is_admin %}
                        <a href="#"><i class="fa fa-circle text-success"></i> 管理员</a>
                        {% else %}
                        <a href="#"><i class="fa fa-circle text-success"></i> 普通用户</a>
                        {% endif %}
                    </div>
                </div>
                <!-- search form (Optional) -->
                <form class="sidebar-form">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="查找..." />
                        <span class="input-group-btn">
                            <button type="submit" name="search" id="search-btn" class="btn btn-flat">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                    </div>
                </form>
                <!-- /.search form -->
                <!-- Sidebar Menu -->
                <ul class="sidebar-menu" data-widget="tree">
                    <li class="header">导航</li>
                    <!--li class="active treeview"-->
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-cog"></i> <span>系统配置</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">

                            <li class="active"><a href="#" data-addtab="user" data-target="#MasterTabs" data-title="用户管理" data-url="/myauth/user/">
                                <i class="fa fa-user"></i>用户管理</a></li>
                            <li><a href="#" data-addtab="group" data-target="#MasterTabs" data-title="用户群组管理" data-url="/myauth/group/">
                                <i class="fa fa-group"></i>用户群组管理</a></li>
                            <li><a href="#" data-addtab="permission" data-target="#MasterTabs" data-title="权限管理" data-url="/myauth/permission/">
                                <i class="fa fa-expeditedssl"></i>权限管理</a></li>
                            <li><a href="#" data-addtab="mymenu" data-target="#MasterTabs" data-title="菜单管理" data-url="/mymenu/index/">
                                <i class="fa fa-bars"></i>菜单管理</a></li>

                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-envelope"></i>
                            <span>邮箱管理</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li>
                                <a href="#" data-addtab="maildomain" data-target="#MasterTabs" data-title="邮件域" data-url="/mail/domain/">
                                    <i class="fa fa-circle-o"></i>邮件域</a></li>
                            <li><a href="#" data-addtab="mailuser" data-target="#MasterTabs" data-title="用户邮箱" data-url="/mail/user/">
                                <i class="fa fa-circle-o"></i>用户邮箱</a></li>  
                            <li><a href="#" data-addtab="mailgroup" data-target="#MasterTabs" data-title="邮件组" data-url="/mail/group/">
                                <i class="fa fa-circle-o"></i>邮件组</a></li> 
                        </ul>
                    </li>
                </ul>

            </section>
            <!-- /.sidebar -->
        </aside>
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Main content -->
            <section class="content container-fluid" style="padding:0px">
                <ul class="nav nav-tabs" id="MasterTabs" role="tablist">
                    <li class="nav-tabs-header active" role="presentation">
                        <a aria-controls="home" data-toggle="tab" href="#home" role="tab">
                            <i class="fa fa-home"></i> 我的面板
                        </a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content fixheight">
                    <div class="tab-pane active" id="home" role="tabpanel">
                        <div class="box box-solid">
                            <div class="box-body">
                                <div class="row">
                                    <div class="col-sm-2">
                                        <div class="box box-solid no-shadow">
                                            <div class="box-body">
                                                <img class="img-responsive" src="{% static 'images/qrcode.png' %}" alt="qrcode" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-7">
                                        <div class="box box-solid no-shadow">
                                            <div class="box-header with-border">
                                                <i class="fa fa-text-width"></i>
                                                <h3 class="box-title">软件介绍</h3>
                                            </div>
                                            <div class="box-body">
                                                <p class="text-muted">
                                                    针对 iRedMail-0.9.7 版本 管理后台，主要有以下功能
                                                    <p class="text-muted">1、基本用户管理</p>
                                                    <p class="text-muted">2、基本邮件组管理</p>
                                                    <p class="text-muted">3、可以查看用户邮箱使用情况</p>

                                                <hr />
                                                    <a class="btn btn-default" href="#"><i class="fa fa-book"></i> 查看文档</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="box box-solid no-shadow">
                                            <div class="box-header with-border">
                                                <i class="fa fa-phone"></i>
                                                <h3 class="box-title">联系方式</h3>
                                            </div>
                                            <div class="box-body">
                                                <p>
                                                    <i class="fa fa-qq"></i> QQ ： <a>249545020</a>
                                                </p>
                                                <p>
                                                    <i class="fa fa-weixin"></i> 微信 ： <a>13917936434</a>
                                                </p>
                                                <p>
                                                    <i class="fa fa-envelope"></i> 邮箱 ： <a>249545020@qq.com</a>
                                                </p>
                                                <p>
                                                    <i class="fa fa-credit-card"></i> 支付宝 ： <a>13917936434</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="nav-tabs-custom">
                                    <ul class="nav nav-tabs">
                                        <li class="active">
                                            <a href="#timeline" data-toggle="tab">更新记录</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div class="active tab-pane" id="timeline">
                                            <ul class="timeline">
                                                <li class="time-label">
                                                    <span class="bg-red">
                                                        2018.1.30
                                                    </span>
                                                </li>
                                                <li>
                                                    <i class="fa fa-comments bg-yellow"></i>

                                                    <div class="timeline-item bg-grey">

                                                        <h3 class="timeline-header"><a href="#">炎舞皇</a></h3>

                                                        <div class="timeline-body">
                                                            项目创建
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <i class="fa fa-clock-o bg-gray"></i>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->
        <!-- Main Footer -->
        <footer class="main-footer">
            <!-- To the right -->
            <div class="pull-right hidden-xs">
                <b>Version</b> 1.0.0
            </div>
            <!-- Default to the left -->
            <strong>Copyright © 2018-2019 .</strong> 作者：炎舞皇. MyOPS系统.
        </footer>

    </div>

{% endblock %}
